<template>
  <view class="root" :style="{ paddingTop: `${statusHeight + 44}px` }">
    <view
      :style="{
        boxSizing: `content-box`,
        paddingTop: `${statusHeight}px`,
        height: `44px`,
        backgroundImage: `linear-gradient(90deg, #8ec5fc, #4388e7)`,
      }"
      class="fd-row ai-center fixed top-0 left-0 width-100vw"
    >
      <navigator
        open-type="navigateBack"
        hover-class="navigator-hover"
        class="pl-30 pr-30"
      >
        <icons class="text-left" color="#fff" type="arrowleft" size="24" />
      </navigator>

      <text
        :style="{ left: `21%`, right: `21%` }"
        class="absolute text-center fs-32 fw-700 color-fff"
      >
        {{ address.title }}收货地址
      </text>
    </view>
    <view class="header" />

    <view class="main">
      <view class="section bgc-fff mb-50 fs-26 color-333">
        <label
          v-for="(item, index) in inputInfo"
          :key="index"
          class="code-box bb-eb height-100 ai-center"
        >
          <text class="mr-12">{{ item.title }}:</text>

          <view v-if="item.el == 'switch'" class="f1 ai-end">
            <switch
              @change="changeSwitch"
              :checked="Boolean(model[item.model])"
              color="#4388e7"
            />
          </view>
          <input
            v-else
            class="f1 input fs-26"
            v-model="model[item.model]"
            placeholder-class="color-999"
            :maxlength="item.maxlength"
            :type="item.type"
            :placeholder="item.placeholder"
          />
        </label>
      </view>
      <text class="fs-24 color-4388e7 ml-30">
        友情提示：仅提供驿站所在小区范围内送件上门
      </text>

      <button
        :style="{
          lineHeight: 2.5,
          margin: `60px 30px`,
          backgroundImage: `linear-gradient(90deg, #8ec5fc, #4388e7)`,
        }"
        hover-class="btn-hover"
        class="color-fff fs-32 text-center br-20"
        @click="saveAddress"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script>
  import icons from "@/components/icons";
  export default {
    components: { icons },
    data: () => ({
      statusHeight: uni.getSystemInfoSync().statusBarHeight,
      address: {
        title: "",
        id: "",
      },
      model: {
        name: "",
        tel: "",
        address: "",
        isDefault: false,
      },
      inputInfo: [
        {
          title: "收货人",
          placeholder: "请输入收货人",
          maxlength: 12,
          type: "text",
          model: "name",
        },
        {
          title: "联系电话",
          placeholder: "请输入联系电话",
          maxlength: 11,
          type: "number",
          model: "tel",
        },
        {
          title: "详细地址",
          placeholder: "XX小区XX栋XX单元XX楼XX号",
          maxlength: 50,
          type: "text",
          model: "address",
        },
        { title: "设为默认", el: "switch", model: "isDefault" },
      ],
    }),
    onLoad(params) {
      uni.showLoading({ title: "Loading...", mask: true });
      this.address.id = params.id;
      if (params.id) {
        this.address.title = "编辑";
        uni.fetch("/api/address/detail", {
          data: { addressId: params.id },
          success: (res) => {
            this.model.name = res.username;
            this.model.tel = res.usermobile;
            this.model.address = res.address;
            this.model.isDefault = res.status;
            uni.hideLoading();
          },
        });
      } else {
        this.address.title = "添加";
        uni.hideLoading();
      }
    },
    methods: {
      changeSwitch(e) {
        this.model.isDefault = e.detail.value;
      },
      saveAddress() {
        let [model, title] = [this.model];
        if (!model.name) {
          title = "请输入收货人姓名";
        } else if (!uni.isPhoneNumber(model.tel)) {
          title = "请输入正确的电话号码";
        } else if (!model.address) {
          title = "请输入详细收货地址";
        } else {
          uni.fetch(`/api/address/${this.address.id ? "edit" : "add"}`, {
            data: {
              addressId: this.address.id,
              username: model.name,
              usermobile: model.tel,
              address: model.address,
              status: Number(model.isDefault),
            },
            success: uni.navigateBack,
          });
        }
        title && uni.showToast({ title, icon: "none" });
      },
    },
  };
</script>

<style>
  .header {
    z-index: 0;
    height: 66px;
    border-radius: 0 0 30% 30%;
    background-image: linear-gradient(90deg, #8ec5fc, #4388e7);
  }

  .main {
    z-index: 1;
    margin-top: -88rpx;
    margin-bottom: 130rpx;
    padding: 0 30rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 20rpx;
    padding: 30rpx 25rpx;
  }

  .bb-eb {
    border-bottom: 1rpx solid #ebebeb;
  }
</style>
